<!-- src/components/admin/school-modal.vue -->
<template>
  <u-popup :show="S.showModal.value" mode="center" :round="10">
    <view class="vbox popup-container">
      <view class="popup-header">
        <text>{{
          S.modalMode.value === "edit" ? "编辑学校" : "添加学校"
        }}</text>
        <view class="fill"></view>
        <u-icon
          name="close"
          @click="S.closePopup()"
          size="18"
        ></u-icon>
      </view>
      <u-form :model="S.currentModel" ref="formRef">
        <u-form-item label="学校名称" prop="name">
          <u-input
            v-model="S.currentModel.name"
            placeholder="输入学校名称"
          ></u-input>
        </u-form-item>

        <view class="hbox">
          <u-button
            type="default"
            @click="S.closePopup()"
            text="取消"
          ></u-button>
          <u-button
            type="primary"
            @click="S.handleSubmit()"
            :text="S.modalMode.value === 'edit' ? '保存' : '添加'"
          ></u-button>
        </view>
      </u-form>
    </view>
  </u-popup>
</template>

<script setup>
import S from "@/js/admin/school.js";
import "jbecool/jbecool.uniapp.min.js";
</script>

<style scoped>
.popup-container {
  padding: 20px;
  width: 80vw;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.hbox {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.hbox u-button {
  flex: 1;
}
</style>